<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		
	</head>
	<body>
		<h2>测试ios浏览器下 input输入框设置了readonly之后，点击输入框还是弹出一小块区域</h2>
		<h6 style="color: royalblue;">左面是一个上下的箭头，右边是是一个"完成（Done）"</h6>
		<input type="text" readonly="readonly"  name="" id="" value="啥也没有" />
		<p>第一个，这个什么属性也没加，只有一个readonly</p>
		<input type="text" readonly="readonly" unselectable="on" name="" id="" value="只有unselectable='on'" />
		<p>第二个，加入了一个'unselectable="on"'这个属性，发现还是不行的</p>
		<input type="text" readonly="readonly" unselectable="on" onfocus="this.blur()" name="" id="" value="这个都有" />
		<p>第三个，把'unselectable="on"'和'onfocus="this.blur()"'这个属性都加上了，这样就可以了。页面终于安静了！！！</p>
		<button>点我</button>
	</body>
	<script type="text/javascript">
		var but = document.getElementsByTagName("button")[0];
		but.onclick = function(){
			document.getElementsByTagName("input")[2].value = 111111111;
		}
		document.getElementsByTagName("input")[2].onclick = function (){
			alert(1111111);
		}
	</script>
</html>
